<template>
  <div class="question">
    <div v-show="isRisk">
	    您的风险测评结果为：{{$store.state.risk_res}}
      <Button :style="{margin:'40px auto'}" type="primary" @click="changeIsRisk" >重新测评</Button> 
    </div>
    <div v-show="!isRisk">
      <Button :style="{margin:'40px auto'}" type="primary" @click="changeIsRisk" >返回测评结果</Button> 
      <Card  v-for="(item, index) in topicsData" :key="index">
        <div>
            <p slot="title"  style="display: flex;justify-content: space-between color: #f8f8f9;">
          {{index+1}}.{{item}}
        </p> 
        <RadioGroup v-model="data[index]"  vertical>
            
            <Radio @click.native="change(index,index1)" v-for="(item1, index1) in contentData[index]"  :key="index1" :label="index1" value="index1" >  
            <Icon type="social-apple"></Icon>
            <span >{{contentData[index][index1]}}</span>
          
              </Radio>
            
        </RadioGroup> 
            </div>
      </Card> 
      <Button :style="{margin:'40px auto'}" type="primary" @click="submit()" >提交</Button> 
    </div>
    <Modal
        v-model="modal1"
        title="您的风险测评结果为："
        @on-ok="ok"
        @on-cancel="cancel">
        <p>{{$store.state.risk_res}}</p>
        <p>点击确认进入到下一步，点击取消留在当前步骤</p>
    </Modal>
  </div>
</template>

<script>
    import {
        get_risk_eval,
        risk_eval
    } from '@/api/api'
    export default {
        data() {
            return {
                modal1:false,
                topicsData: [],
                contentData: [],
                scoreData: [],
                data: [4,3,4,4,4,4,4,4,4,4],
                isRisk:this.$store.state.risk_res
            }
        },
        activated() {
            this.getCardListData()
        },
        methods: {
            changeIsRisk() {
              this.isRisk = !this.isRisk
            },
            change: function(num1, num2) {

                this.data[num1] = num2
                console.log("data", this.data[num1])

            },
            submit: function() {
                console.log("data", this.data.slice(0, 10))
                this.risk_eval()
            },
            ok () {
                this.$store.commit('setRecommendCurStep',1)
            },
            cancel () {
                this.$Message.info('您可以在头部步骤中点击到下一步');
            },
            risk_eval() {
              let data = {
                  "account_id":this.$store.state.account_id,
                  "option":this.data
              }
              console.log(data)

              risk_eval(data)
              .then(res => {
                console.log(res)
                this.$store.commit('setRisk_res',res.data)
                this.modal1 = true
                if (this.$store.state.recommendStep < 1) {
                    this.$store.commit('setRecommendStep',1)
                }
              })
              .catch(err => {
                this.$Message.error(err)
              })

            },
            getCardListData() {
                get_risk_eval()
                    .then(res => {
                        // console.log("biaoti", res.topics)
                        // console.log("内容", res.options_content)
                        this.topicsData = res.topics;
                        this.contentData = res.options_content;
                        this.scoreData = res.options_score
                    })
                    .catch(err =>{
                      this.$Message.error(err);
                      console.log(err)
                    })
            }
        }
    }
</script>

<style scoped>
.question{
  text-align: left;
}
</style>
